<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>websocket 客户端</title>
</head>
<link rel="stylesheet" href="../../static/libs/layui/css/layui.css" th:href="@{/libs/layui/css/layui.css}">
<body>
<div>
    <div class="layui-inline">
        发送者：
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" id="sender" class="layui-input"/>
        </div>
        <button id="connect" class="layui-btn layui-btn-sm">建立连接</button>
        <button id="disconnect" class="layui-btn layui-btn-sm layui-btn-danger">断开连接</button>
    </div>

    <div id="conversationDiv" style="margin-top: 30px;">
        <div class="layui-inline">
            接收者：
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" id="receiver" class="layui-input"/>
            </div>
            <span style="margin-left: 15px;">消息体：</span>
            <div class="layui-input-inline" style="width: 200px; margin-right: 15px;">
                <input type="text" id="content" class="layui-input"/>
            </div>
            <button id="sendMessage" class="layui-btn  layui-btn-warm">发送消息</button>
            <button id="cleanMessage" class="layui-btn  layui-btn-danger">清空消息区</button>
        </div>

        <div style="margin-top: 20px;">
            <h2>消息区</h2>
            <hr>
            <div id="response"></div>
        </div>
    </div>
</div>
<script src="../../static/libs/layui/layui.js" th:src="@{/libs/layui/layui.js}"></script>
<script src="../../static/js/sockjs.min.js" th:src="@{/js/sockjs.min.js}"></script>
<script src="../../static/js/stomp.min.js" th:src="@{/js/stomp.min.js}"></script>
<script type="text/javascript">
    /* 点对点聊天 */
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery,
            layer = layui.layer;
        var stompClient = null;
        var isConnected = false;

        // 建立连接
        function connect() {
            var sender = $('#sender').val();
            if (sender === undefined || sender.trim() === '') {
                layer.msg('发送者不能为空');
                return;
            }
            var socket = new SockJS('/p2pChat');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                isConnected = true;
                var destination = '/user/' + sender + '/p2pChat';
                stompClient.subscribe(destination, function (response) {
                    showResponseMessage(JSON.parse(response.body));
                });
            });
            layer.msg('已建立连接');
        }

        // 断开链接
        function disconnect() {
            if (stompClient != null) {
                isConnected = false;
                stompClient.disconnect();
            }
            layer.msg('已断开连接');
        }

        // 点击开启连接
        $('#connect').click(function () {
            connect();
        });

        // 点击关闭连接
        $('#disconnect').click(function () {
            disconnect();
        });

        // 点击发送消息
        $('#sendMessage').click(function () {
            if (!isConnected) {
                layer.msg('请先建立连接');
                return;
            }
            var receiver = $('#receiver').val();
            if (receiver === '') {
                layer.msg('接收者不能为空');
                return;
            }
            var content = $('#content').val();
            if (content === '') {
                layer.msg('发送内容不能为空');
                return;
            }
            var body = {message: content, sender: $('#sender').val(), receiver: receiver};
            stompClient.send("/app/p2pChat", {}, JSON.stringify(body));
        });

        // 清空消息区
        $('#cleanMessage').click(function () {
            $("#response").html('');
        });

        // 显示服务端响应消息
        function showResponseMessage(body) {
            var html = '';
            html += '<p style="margin-top:10px;">';
            html += '<span style="margin-right:15px;">消息发送人：' + body.sender + '</span>';
            html += '<span style="margin-right:15px;">发送内容：' + body.message + '</span>';
            html += '<span style="margin-right:15px;">发送时间：' + body.sendTime + '</span>';
            html += '</p>';
            $("#response").append(html);
        }
    });
</script>
</body>
</html>